<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<script>
// TODO: cookie
// 本身用于浏览器和服务端的通讯
// document.cookie='name=value'; 相同 key 会覆盖, 不同 key 会追加
// 存储大小 最大 4kb

// TODO: session
// session 是存在服务器的一种用来存放用户数据的
// 浏览器第一次发送请求时, 服务器将对应的 sessionID 通过 cookie 返回给浏览器, 第二次请求的时候, 会带回去

// TODO: cookie 与 session 的区别
// 存储位置不同: cookie 的数据信息存放在本地, session 的数据信息存放在服务器上
// 存储有效期不同: cookie 只要不超过设置的过期时间, 可以一直存储, session 在超过一定的操作时间(通常为30分钟)后会失效
// 存储容量大小不同: cookie 最大存储 4kb, session 虽然没有大小的限制, 但是为了服务器性能考虑, 一般不能存放太多数据
// 存储的数据类型不同: cookie 只能保管ASCII字符串, session 中能够存储任何类型的数据

// TODO: localStorage / sessionStorage
// 最大存储 5M
// API 简单易用 setItem / getItem
// 不会随着 http 请求被发出去
// TODO: 两者区别
  // localStorage 数据会永久存储, 除非代码或者手动删除
  // sessionStorage 数据只存在于当前会话, 浏览器关闭则清空
</script>
</body>
</html>